extends ../public/layout
block title
    title #{productInfo.product.title}
block stylesheet
    link(rel="stylesheet", href="/bower_components/swiper/dist/css/swiper.css")
block content
    .am-g#header-nav
        .am-u-sm-1
            a(href="/home/#{productInfo.store.objectId}")
                img.img-responsive.am-round(src = "#{productInfo.store.avatar}")
        .am-u-sm-5
            a(href="/home/#{productInfo.store.objectId}")
                | #{productInfo.store.name}
        .am-u-sm-2
            a(href="/search/#{productInfo.store.objectId}")
                i.am-inline-block.search-icon
        .am-u-sm-2
            a.goCart
                i.am-inline-block.cart-icon
        .am-u-sm-2
            a.goOrderList
                i.am-inline-block.list-icon
    .swiper-container.border-bottom-add
        .swiper-wrapper
            each image in productInfo.product.images
                .swiper-slide
                    img(src="#{__IMAGE_HOST__}#{image}-banner")
        .swiper-pagination
    .am-g.white-background.border-bottom-add.am-padding-left-xs.am-padding-xs
        .am-u-sm-12.md-font.am-padding-xs
            |#{productInfo.product.title}
        .am-u-sm-6.set-line-height.am-padding-xs
            span.money-color.lg-font ￥#{productInfo.salePrice}
            i.pure-gray.xs-font /件
        .am-u-sm-6.am-text-right.pure-gray.xs-font.am-padding-xs 累计销量:#{productInfo.product.saleCount}件
    a(href="/home/#{productInfo.store.objectId}")
        .am-g.white-background.am-margin-top-sm.am-padding-xs.border-bottom-add.md-line-height
            .am-u-sm-8.pure-gray
                    i.am-inline-block.shop-icon
                    |#{productInfo.store.name}
            .am-u-sm-4.am-text-right
                i.am-inline-block.more-icon
    .am-tabs.am-margin-top-sm(data-am-tabs='')
        ul.am-nav.am-tabs-nav.am-nav-justify.white-background
            li.am-text-center.am-active
                a.am-inline-block.md-font-size.gray-font(href='#tab1') 图文详情
            li.am-text-center
                a.am-inline-block.md-font-size.gray-font(href='#tab2') 商品参数
        .am-tabs-bd.am-margin-top-xs.white-background
            #tab1.am-tab-panel.am-fade.am-in.am-active.am-padding-0
                each image in productInfo.product.detailImages
                    img.am-img-responsive(src="#{__IMAGE_HOST__}#{image}")
            #tab2.am-tab-panel.am-fade.am-padding-0
                each  value,key in productInfo.product.info
                    .am-g.sm-font-size.md-line-height.border-bottom-add
                        .am-u-sm-3.gray-font.am-text-left #{key}
                        .am-u-sm-9  #{value}
    .am-g.footer-nav.am-text-center.white-background
            .am-u-sm-2.am-text-center.am-padding-right-0.shareOrStore
                i.am-inline-block.share-icon
                br
                span.pure-gray.xs-font.am-inline-block 分享
            .am-u-sm-2.am-text-center.am-padding-right-0.shareOrStore
            .am-u-sm-4.am-padding-0
                a.am-btn.yellow-btn.sm-font.py-btn.callAddToCart 加入购物车
            .am-u-sm-4.am-padding-0
                a.am-btn.red-btn.sm-font.py-btn.callDirectBuy 立即购买
    .mask
    .am-container.pop-box.white-background.am-padding-0
        .am-g.am-padding-xs
            .am-u-sm-3
                img.am-img-responsive(src="#{__IMAGE_HOST__}#{productInfo.product.images[0]}")
            .am-u-sm-9.am-cf
                span.am-block #{productInfo.product.title}
                i.am-fr.md-font.money-color ￥#{productInfo.salePrice}
        .num-select.border-top-add.am-text-center
            span.inline-block.am-margin-right-lg 购买件数:
            .num-box.am-margin-left-lg
                span.am-inline-block
                    i.am-inline-block.cut-icon
                input.am-form-field.am-inline-block.am-text-center.buyNum(type="num" value="1")
                span.am-inline-block
                    i.am-inline-block.plus-icon
        button.am-btn.select-class.am-btn-block.py-btn.addToCart(data-productId = "#{productInfo.objectId}") 加入购物车
        button.am-btn.am-btn-block.py-btn.directBuy( data-productId = "#{productInfo.objectId}") 下一步

block javascript
    script(type="text/javascript" src = "/bower_components/amazeui/dist/js/amazeui.min.js")
    script(type="text/javascript" src = "/bower_components/swiper/dist/js/swiper.min.js")
    script(type="text/javascript" src = "/public/javascripts/product.js")
    script(type="text/javascript").
        $(function(){
            product.init();
        });